<template>
  <div class="box">
    <div class="f1">
      <ul v-show="status != 'lbzs'">
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组30.png" alt="" />
            <div class="icon2"></div>
          </div>
          <span>填写申请信息</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组33.png" alt="" />
            <div class="icon2"></div>
          </div>
          <span>上传申请资料</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组35.png" alt="" />
            <div class="icon2"></div>
          </div>
          <span>财税数据授权</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组36.png" alt="" />
          </div>
          <span>业务提交完成</span>
        </li>
      </ul>
      <!-- 从列表进入进度条 -->
      <ul v-show="status == 'lbzs'">
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组30.png" alt="" />
            <div class="icon2 zssq"></div>
          </div>
          <span style="margin-left: -10px">企业认证</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组33.png" alt="" />
            <div class="icon2 zssq"></div>
          </div>
          <span>填写申请信息</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组35.png" alt="" />
            <div class="icon2 zssq"></div>
          </div>
          <span>上传申请资料</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组37.png" alt="" />
            <div class="icon2 zssq"></div>
          </div>
          <span>财税数据授权</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/005.png" alt="" />
          </div>
          <span>业务提交完成</span>
        </li>
      </ul>
    </div>
    <div class="f2">
      <div class="content">
        <!-- <div class="title">
          <h6></h6>
          税务信息采集
        </div> -->
        <div class="f2_content">
          <div class="f2_form">
            <el-form :model="form" label-width="150px" :rules="rules">
              <el-form-item label="纳税人识别号" prop="a">
                <el-input v-model="form.a"></el-input>
              </el-form-item>
              <el-form-item label="企业名称" prop="b">
                <el-input v-model="form.b"></el-input>
              </el-form-item>
              <el-form-item label="税局账号" prop="c">
                <el-input v-model="form.c"></el-input>
              </el-form-item>
              <el-form-item label="办税人选择" prop="d">
                <!-- <el-input v-model="form.d"></el-input> -->
                <el-select v-model="form.d" placeholder="">
                  <el-option label="财务负责人" value="财务负责人"> </el-option>
                  <el-option label="法定代表人" value="法定代表人"> </el-option>
                  <el-option label="办税人" value="办税人"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="税局密码" prop="e">
                <el-input :type="password" v-model="form.e"></el-input>
                <p class="show" @click="isShow">
                  <img v-if="show" src="@/assets/image/yc@2x.png" alt="" />
                  <img v-else src="@/assets/image/xs@2x.png" alt="" />
                </p>
              </el-form-item>
              <p class="forget">忘记密码?</p>
            </el-form>
          </div>
        </div>

        <div class="btn">
          <button @click="lastStep" :disabled="isLock" class="next btn3">
            上一步
          </button>
          <button class="next" :disabled="isLock" @click="nextStep">
            确认授权
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { myPostFetch, smsSend } from "@/utils";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      status: "", //判断是从列表进入还是从表格进
      radio: false,
      password: "password",
      show: true,
      isLock: false,
      disabled: false,
      btn: false,
      taxidnum: "", // 纳税人识别号
      entname: "", //企业名称
      form: {
        a: "",
        b: "",
        c: "",
        d: "",
        e: "",
      },

      // 表单验证
      rules: {
        a: [{ required: true, message: " ", trigger: "blur" }],
        b: [{ required: true, message: " ", trigger: "blur" }],
        c: [{ required: true, message: " ", trigger: "blur" }],
        d: [{ required: true, message: " ", trigger: "blur" }],
        e: [{ required: true, message: " ", trigger: "blur" }],
      },
    };
  },
  // 生命周期方法
  mounted() {
    this.form.a = this.$route.query.taxidnum;
    this.form.b = this.$route.query.entname;
    this.status = this.$route.query.status;
  },
  methods: {
    // 切换密码隐藏显示
    isShow() {
      this.show = !this.show;
      this.show ? (this.password = "password") : (this.password = "text");
    },
    // 上一页
    lastStep() {
      this.$router.go(-1);
    },
    // 产品申请第1步
    async nextStep() {
      let { a, b, c, d, e } = this.form;
      if (a == "" || b == "" || c == "" || d == "" || e == "")
        return ElMessage.error("请输入内容");
      this.$confirm("财税数据授权成功，请提交订单。", "提示", {
        confirmButtonText: "提交",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          this.status
            ? this.$router.push(`/gsebzsApply5?status=lbzs`)
            : this.$router.push(`/gsebzsApply5`);
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  box-sizing: border-box;
  padding-bottom: 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  overflow: hidden;
  .f1 {
    margin-top: 20px;
    ul {
      display: flex;
      align-items: center;
      li {
        display: flex;
        flex-direction: column;
        height: 40px;
        .icon {
          display: flex;
          align-items: center;
          .icon1 {
            width: 40px;
          }
          .icon2 {
            width: 180px;
            height: 3px;
            background-color: #dbdbdb;
            margin: 0 8px;
          }
          .zssq {
            width: 110px;
          }
        }
        span {
          font-size: 14px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #999999;
          margin-left: -19px;
          margin-top: 3px;
        }
      }
    }
  }
  .f2 {
    box-sizing: border-box;
    padding: 40px 80px;
    margin: 0 auto;
    width: 1200px;
    .content {
      box-sizing: border-box;
      padding: 30px 20px 50px 20px;
      margin: 0 auto;
      width: 1024px;
      height: 100%;
      .f2_content {
        box-sizing: border-box;
        padding: 40px 130px;
      }
      .title {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        font-size: 18px;
        font-weight: bold;
        color: #333333;
        h6 {
          width: 5px;
          height: 18px;
          background-color: #0a7be0;
          margin-right: 10px;
        }
      }
      .f2_form {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-left: -77px;
        .show {
          cursor: pointer;
          position: absolute;
          right: 15px;
          top: 0px;
          z-index: 99;
          img {
            width: 28px;
          }
        }
        .forget {
          text-decoration: underline;
          cursor: pointer;
          display: flex;
          justify-content: flex-end;
          font-size: 16px;
          color: #3f6ef2;
          margin-bottom: 10px;
        }
      }

      // 按钮
      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 50px;
        .last {
          width: 160px;
          height: 36px;
          background: #0a7be0;
          opacity: 0.3;
          border-radius: 4em;
        }
        .next {
          width: 160px;
          height: 36px;
          background: #0a7be0;
          border-radius: 4px;
        }
        .btn3 {
          background-color: #ccc;
        }
        button {
          align-items: center;
          justify-content: center;
          display: flex;
          border-radius: 5px;
          width: 180px;
          height: 50px;
          color: #fff;
          margin-left: 30px;
          border: 0;
        }
      }
    }
  }
}
/* 输入框样式  */
::v-deep(.el-input__inner) {
  box-sizing: border-box;
  width: 450px;
  height: 39px;
  font-size: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 0px;
  padding: 10px;
  color: #606266;
  outline: 0;
  line-height: 35px !important;
}
::v-deep(.el-form-item) {
  margin-bottom: 18px;
}
::v-deep(.el-form-item__label) {
  font-size: 14px;
  font-weight: 600;
  color: #333333;
}
::v-deep(.el-form-item) {
  margin-bottom: 22px;
}
</style>
